<template>
    <div>
        <table>
            <caption>指令方法</caption>
            <tr>
                <th>方法名</th>
                <th>说明</th>
                <th>参数</th>
                <th>默认值</th>
            </tr>
            <tr>
                <td>setOptions</td>
                <td>指令初始化方法，应该在mounted钩子函数中调用。

                </td>
                <td>参数 Object 具有以下属性：
                    <highlightjs language="javascript" :code="v1"></highlightjs>
                </td>
                <td><highlightjs language="javascript" :code="v2"></highlightjs></td>
            </tr>
            <tr>
                <td>goto</td>
                <td>跳转索引。索引取值为当前指令元素的子元素索引</td>
                <td>Number</td>
                <td>-</td>
            </tr>
            <tr>
                <td>update</td>
                <td>在dom结构发生变化后应该调用此方法。</td>
                <td>-</td>
                <td>-</td>
            </tr>
        </table>
        <div class="tips">
            v-cc-anchor 不接受表达式，只接收一个命名参数，没有命名参数，默认使用 $anchor 作为指令的引用属性。target 产生滚动条的对像要设置正确，否则不会生效<br/>
            <pre v-pre>
                默认。访问指令方法使用 this.$anchor
                &lt;div v-cc-anchor>
                    ...
                &lt;/div>
                指定命名参数。访问指令方法使用 this.test
                &lt;div v-cc-anchor:test>
                    ...
                &lt;/div>
            </pre>
        </div>
        <div class="title">
            示例
        </div>
        <div class="desc">
            <highlightjs langauage="vue" :code="v3"></highlightjs>
        </div>
        <div class="demo" ref="demo">
            <span @click="goto(0)" :class="{active:index===0}">1</span>
            <span @click="goto(1)" :class="{active:index===1}">2</span>
            <span @click="goto(2)" :class="{active:index===2}">3</span>
            <span @click="goto(3)" :class="{active:index===3}">4</span>
        </div>
        <div v-cc-anchor>
            <div style="height:500px">1</div>
            <div style="height:500px">2</div>
            <div style="height:500px">3</div>
            <div style="height:500px">4</div>
        </div>
    </div>
</template>

<script>
    import domEvent from '@/utils/domEvent';
    export default {
        name: "ccAnchorDemo",
        methods: {
            goto(i) {
                this.$anchor.goto(i);
            }
        },
        destroyed() {
            domEvent.off('scroll');
        },
        mounted() {
            let dom = document.querySelector('.flex-content');
            let demo = this.$refs.demo;
            let tp = demo.offsetTop;
            this.$anchor.setOptions({
                target: dom,
                onChange: (i) => {
                    this.index = i;
                }
            });
            domEvent.on(dom, 'scroll', (e) => {
                demo.className = tp > dom.scrollTop ? 'demo' : 'demo fixed';
            });
        },
        data() {
            return {
                index: -1,
                v1: `
                    {
                        target: Window | HTMLElement, //产生滚动条的目标对像
                        offset: Number, //偏移量
                        animation: Boolean, //是否动画滚动
                        onChange: Function //滚动到指定索引后的回调，参数为索引号
                    }
                `,
                v2: `
                    {
                        target: Window,
                        offset: 0,
                        animation: true,
                        onChange: undefined
                    }
                `,
                v3: `
                    <div>
                        <span @click="goto(0)" :class="{active:index===0}">1</span>
                        <span @click="goto(1)" :class="{active:index===1}">2</span>
                        <span @click="goto(2)" :class="{active:index===2}">3</span>
                        <span @click="goto(3)" :class="{active:index===3}">4</span>
                    </div>
                    <div v-cc-anchor>
                        <div style="height:500px">1</div>
                        <div style="height:500px">2</div>
                        <div style="height:500px">3</div>
                        <div style="height:500px">4</div>
                    </div>

                    .active {color: #f00}

                    new Vue({
                        data: {
                            index: -1,
                        },
                        methods: {
                            goto(i) {
                                this.$anchor.goto(i);
                            }
                        },
                        mounted() {
                            this.$anchor.setOptions({
                                target: window,
                                onChange: (i) => {
                                    this.index = i;
                                }
                            });
                        }
                    });


                `
            }
        }
    }
</script>

<style scoped lang="scss">
    .active {
        color: #f00;
    }
    .demo span {
        display: inline-block;
        padding: 5px;

    }
    .demo.fixed {
        position: fixed;
        top: 0;
    }
</style>